import 'package:flutter/material.dart';

// 应用入口函数
void main() {
  runApp(MyApp());
}

// 根组件
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter 约束演示',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: ConstraintsDemoScreen(),
    );
  }
}

// 演示屏幕
class ConstraintsDemoScreen extends StatelessWidget {
  // 一个简单的红色盒子 Widget，用于演示
  final Widget redBox = DecoratedBox(
    decoration: BoxDecoration(color: Colors.red.shade300), // 使用浅一点的红色以区分背景
  );

  // 一个简单的绿色盒子 Widget，用于演示
  final Widget greenBox = DecoratedBox(
    decoration: BoxDecoration(color: Colors.green.shade300),
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('布局约束 (Constraints) 示例')),
      body: SingleChildScrollView(
        // 使用 SingleChildScrollView 防止内容溢出
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            _buildSectionTitle('1. ConstrainedBox 示例'),
            Text('目标：最小高度为50，宽度尽可能大 (父级宽度为屏幕宽度)。Container 尝试设置 height: 5.0。'),
            ConstrainedBox(
              constraints: BoxConstraints(
                minWidth: double.infinity, // 宽度尽可能大 (受父级约束)
                minHeight: 50.0, // 最小高度为50像素
              ),
              child: Container(
                height: 5.0, // 这个高度会小于 ConstrainedBox 的 minHeight
                color: Colors.amber.withOpacity(0.3), // 给Container一个背景色以观察其范围
                child: redBox,
              ),
            ),
            SizedBox(height: 10),
            Text('将 Container 的 height 设置为 80.0 (大于minHeight: 50.0):'),
            ConstrainedBox(
              constraints: BoxConstraints(
                minWidth: double.infinity,
                minHeight: 50.0,
              ),
              child: Container(
                height: 80.0, // 这个高度大于 ConstrainedBox 的 minHeight
                color: Colors.amber.withOpacity(0.3),
                child: redBox,
              ),
            ),
            _buildDivider(),

            _buildSectionTitle('2. SizedBox 示例'),
            Text('目标：固定宽高为 80x80。'),
            SizedBox(width: 80.0, height: 80.0, child: greenBox),
            Text(
              'SizedBox 等价于 ConstrainedBox(constraints: BoxConstraints.tightFor(width: 80.0, height: 80.0))',
            ),
            _buildDivider(),

            _buildSectionTitle('3. 多重限制 (Multiple Constraints) 示例 1'),
            Text('父 ConstrainedBox: minWidth: 60, minHeight: 100'),
            Text('子 ConstrainedBox: minWidth: 90, minHeight: 20'),
            Text('预期结果: minWidth 取较大值 (90), minHeight 取较大值 (100)'),
            ConstrainedBox(
              constraints: BoxConstraints(
                minWidth: 60.0,
                minHeight: 100.0,
              ), // 父
              child: ConstrainedBox(
                constraints: BoxConstraints(
                  minWidth: 90.0,
                  minHeight: 20.0,
                ), // 子
                child: Container(
                  color: Colors.blue.withOpacity(0.3),
                  child: redBox,
                ), // 加个背景色看范围
              ),
            ),
            _buildDivider(),

            _buildSectionTitle('3.1 多重限制 (Multiple Constraints) 示例 2 (交换约束)'),
            Text('父 ConstrainedBox: minWidth: 90, minHeight: 20'),
            Text('子 ConstrainedBox: minWidth: 60, minHeight: 100'),
            Text('预期结果: minWidth 取较大值 (90), minHeight 取较大值 (100)'),
            ConstrainedBox(
              constraints: BoxConstraints(minWidth: 90.0, minHeight: 20.0), // 父
              child: ConstrainedBox(
                constraints: BoxConstraints(
                  minWidth: 60.0,
                  minHeight: 100.0,
                ), // 子
                child: Container(
                  color: Colors.cyan.withOpacity(0.3),
                  child: redBox,
                ),
              ),
            ),
            _buildDivider(),

            _buildSectionTitle('思考题：maxWidth 和 maxHeight 的多重限制策略'),
            Text('父 ConstrainedBox: maxWidth: 150, maxHeight: 150'),
            Text('子 ConstrainedBox: maxWidth: 100, maxHeight: 200'),
            Text('预期结果: maxWidth 取较小值 (100), maxHeight 取较小值 (150)'),
            ConstrainedBox(
              constraints: BoxConstraints(
                maxWidth: 150.0,
                maxHeight: 150.0,
                minWidth: 0,
                minHeight: 0,
              ),
              child: ConstrainedBox(
                constraints: BoxConstraints(
                  maxWidth: 100.0,
                  maxHeight: 200.0,
                  minWidth: 0,
                  minHeight: 0,
                ),
                child: Container(
                  width: 300, // 尝试设置一个很大的宽度
                  height: 300, // 尝试设置一个很大的高度
                  color: Colors.purple.withOpacity(0.3),
                  child: greenBox,
                ),
              ),
            ),
            _buildDivider(),

            _buildSectionTitle('4. UnconstrainedBox 示例'),
            Text(
              '目标：去除父级 ConstrainedBox (minHeight: 100) 对子 ConstrainedBox (minHeight: 20) 的影响。',
            ),
            Text('父 ConstrainedBox: minWidth: 60, minHeight: 100'),
            Text('UnconstrainedBox'),
            Text('子 ConstrainedBox: minWidth: 90, minHeight: 20'),
            Text('预期 redBox 尺寸: 90x20。但 UnconstrainedBox 仍会占据父级约束的空间。'),
            ConstrainedBox(
              constraints: BoxConstraints(
                minWidth: 60.0,
                minHeight: 100.0,
              ), // 父
              child: UnconstrainedBox(
                alignment: Alignment.topLeft, // 控制 UnconstrainedBox 内部子组件的对齐
                child: ConstrainedBox(
                  constraints: BoxConstraints(
                    minWidth: 90.0,
                    minHeight: 20.0,
                  ), // 子
                  child: Container(
                    width: 90, // 明确指定大小以匹配约束，便于观察
                    height: 20,
                    color: Colors.orange.withOpacity(0.3),
                    child: redBox,
                  ),
                ),
              ),
            ),
            Text(
              '注意: UnconstrainedBox 自身仍受父级约束，如果其子组件过大导致 UnconstrainedBox 超出父级约束，仍会溢出。',
              style: TextStyle(fontStyle: FontStyle.italic),
            ),
            _buildDivider(),

            _buildSectionTitle('5. UnconstrainedBox 在 AppBar actions 中的应用场景模拟'),
            Text('不使用 UnconstrainedBox，SizedBox(width:20, height:20) 可能无效:'),
            Container(
              color: Colors.grey[300],
              height: kToolbarHeight, // 模拟 AppBar 的高度
              child: Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: <Widget>[
                  // AppBar actions 通常有自己的约束
                  ConstrainedBox(
                    // 模拟 AppBar actions 的内部约束
                    constraints: BoxConstraints(
                      minHeight: kToolbarHeight,
                      minWidth: kToolbarHeight * 0.8,
                    ),
                    child: SizedBox(
                      width: 20.0,
                      height: 20.0,
                      child: CircularProgressIndicator(
                        strokeWidth: 2.0,
                        valueColor: AlwaysStoppedAnimation(Colors.blue),
                      ),
                    ),
                  ),
                ],
              ),
            ),
            SizedBox(height: 10),
            Text('使用 UnconstrainedBox "去除" 父级约束:'),
            Container(
              color: Colors.grey[300],
              height: kToolbarHeight,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: <Widget>[
                  ConstrainedBox(
                    // 模拟 AppBar actions 的内部约束
                    constraints: BoxConstraints(
                      minHeight: kToolbarHeight,
                      minWidth: kToolbarHeight * 0.8,
                    ),
                    child: UnconstrainedBox(
                      child: SizedBox(
                        width: 20.0,
                        height: 20.0,
                        child: CircularProgressIndicator(
                          strokeWidth: 2.0,
                          valueColor: AlwaysStoppedAnimation(Colors.red),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  // 辅助方法，用于构建章节标题
  Widget _buildSectionTitle(String title) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 8.0),
      child: Text(
        title,
        style: TextStyle(
          fontSize: 18,
          fontWeight: FontWeight.bold,
          color: Colors.black87,
        ),
      ),
    );
  }

  // 辅助方法，用于构建分割线
  Widget _buildDivider() {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 15.0),
      child: Divider(height: 1, thickness: 1, color: Colors.grey[300]),
    );
  }
}
